<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>焦点学苑</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="content">
	<div class="head-box">
	    <div class="head wrap">
	          <div class="logo fl"><a href=""><img src="images/logo.png"></a></div>
	          <div class="head-right fr">
	              <div class="head-a fr">
	                   <div class="hgt fl"><img src="images/hgt.png">
	                         <div class="hgt-top">
	                             <input type="text" class="hgt-text">
	                         </div>
	                   </div>
	                   <div class="head-a1 fl"><a href=""><img src="images/tb-a.png"></a></div>
	                   <div class="head-a1 fl"><a href=""><img src="images/tb-b.png"></a></div>
	                   <div class="head-a3 login-click fl">{{loginUser.uname}}</div>
	                   <!-- <div class="head-a4 reg-click fl">注册</div> -->
	              
	              </div>
	              <div class="clearfix"></div>
	              <div class="nav fr">
	                  <ul>
	                       <li><a href="index.html">首页</a></li>
	                       <li><a href="article.html">文章</a>
	                           <div class="sub-nav">
	                                <div class="bich-top"></div>
	                                 <div class="bich">
	                                     <a href="">服饰</a>
	                                     <a href="">美食</a>
	                                     <a href="">出行</a>
	                                     <a href="">约会</a>
	                                 </div>
	                           
	                           </div>
	                       </li>
	                       <li><a href="community.html">社区</a></li>
	                       <li><a href="course.html">课程</a></li>
	                       <li class="nav-cut"><a href="active.html">活动</a></li>
	                       <li><a href="contact.html">联系我们</a></li>
	                  
	                  </ul>
	              </div>
	              <div class="clearfix"></div>
	          </div>
	    </div>
	</div>
	
	
	<div class="content">
</div>

    <div class="col-height"></div>
    <div class="focus-banner">
           <div class="wrap">
                <div class="focus-a1"><img src="upload/focus-a2.png"></div>
                <div class="focus-a2">{{loginUser.uname}}</div>
               <div class="focus-a3">
                          <div class="py-a fl">文章 {{articleNum}}</div>
                          <div class="pyl  fl">关注 {{attentionNum}}
                              <div class="tbq">
                                  <div class="tbq-a" v-for="attention in attentionList">{{attention.uname}}</div>
                                  <!-- <div class="tbq-a">我是大大大</div>
                                  <div class="tbq-a">我是大大大</div>
                                  <div class="tbq-a">我是大大大</div> -->
                              </div>
                          </div>
                          <div class="pyl  fl">粉丝 {{fansNum}}
								<div class="tbq">
								    <div class="tbq-a" v-for="fans in fansList">{{fans.uname}}</div>
								</div>
						  </div>
                          <div class="py-b fl">收藏 {{collNum}}</div>
                </div>
                <!-- <div class="focus-a4"><a href="">+关注</a><span>|</span><a href="">私信</a></div> -->
           </div>    
    </div>
    
    <div class="focus-b-box">
                <div class="focus-list"><div class="focus-title">{{loginUser.uname}}  的文章</div></div>
                <div class="coll-box">
                         <ul class="col-ul">
                              <li v-for="article in articleList">
                                   <div class="col-list">
                                              <div class="col-a fl"><img src="upload/col-a.jpg"></div>
                                              <div class="col-b fl">
                                                    <div class="col-b1">{{article.title}}</div>
                                                    <div class="col-b2"><img src="upload/col-b.jpg">{{loginUser.uname}}<span>{{article.createtime}}</span></div>
                                                    <div class="col-b3">{{article.content}}</div>
                                              </div>
                                              <div class="col-c">
                                                    <span><img src="images/col-c1.jpg">0</span>
                                                    <span><img src="images/col-c2.jpg">3</span>
                                                    <em><img src="images/col-c3.jpg"></em>
                                                    <em><img src="images/col-c4.jpg"></em>
                                                    <em><img src="images/col-c5.jpg"></em>
                                              </div>
                                     </div>         
                              </li>
                              <!-- <li>
                                   <div class="col-list">
                                              <div class="col-a fl"><img src="upload/col-a.jpg"></div>
                                              <div class="col-b fl">
                                                    <div class="col-b1">教你如何一步步把妹子泡到手</div>
                                                    <div class="col-b2"><img src="upload/col-b.jpg">{{loginUser.uname}}<span>2015-11-02</span></div>
                                                    <div class="col-b3">爱情的残酷之处在于，并不是你做了什么帮助你获得了女孩的欢心。</div>
                                              </div>
                                              <div class="col-c">
                                                    <span><img src="images/col-c1.jpg">0</span>
                                                    <span><img src="images/col-c2.jpg">3</span>
                                                    <em><img src="images/col-c3.jpg"></em>
                                                    <em><img src="images/col-c4.jpg"></em>
                                                    <em><img src="images/col-c5.jpg"></em>
                                              </div>
                                     </div>         
                              </li>
                              <li>
                                   <div class="col-list">
                                              <div class="col-a fl"><img src="upload/col-a.jpg"></div>
                                              <div class="col-b fl">
                                                    <div class="col-b1">教你如何一步步把妹子泡到手</div>
                                                    <div class="col-b2"><img src="upload/col-b.jpg">{{loginUser.uname}}<span>2015-11-02</span></div>
                                                    <div class="col-b3">爱情的残酷之处在于，并不是你做了什么帮助你获得了女孩的欢心。</div>
                                              </div>
                                              <div class="col-c">
                                                    <span><img src="images/col-c1.jpg">0</span>
                                                    <span><img src="images/col-c2.jpg">3</span>
                                                    <em><img src="images/col-c3.jpg"></em>
                                                    <em><img src="images/col-c4.jpg"></em>
                                                    <em><img src="images/col-c5.jpg"></em>
                                              </div>
                                     </div>         
                              </li> -->
                         </ul>
                     </div>
               <div class="more"><a href="">查看更多>></a></div>       
    </div>  
</div>

<div class="footer">
   <div class="wrap">
      <div class="foot">
            <div class="foot-left fl">
                 <a href="">关于我们</a>
                 <a href="">加入我们</a>
                 <a href="contact.html">联系我们</a>
                 <a href="">媒体采访</a>
            </div>
            <div class="foot-c fl"><a href=""><img src="images/foot-logo.jpg"></a></div>
            <div class="foot-right fr">
                 <a href="">同城活动</a>
                 <a href="">课程资讯</a>
                 <a href="">最新发布</a>
                 <a href="">热门文章</a>
            </div>
       </div> 
       <div class="foot-btm">网页制作by云邦</div>    
   </div>
</div>


<!--登录注册弹窗-->
<!-- <div class="mask"></div>
<div class="login">
    <div class="login-title">
        <div class="login-a">登录</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input type="text" class="login-text" placeholder="注册时填写的邮箱"></div>
        <div class="login-d"><input type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input type="button" class="login-btn" placeholder="登录"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
             <span>还没有焦点账号?><a href="javascript:;" class="reg-href">点击注册</a></span>
        </div>
    </div>
</div>

<div class="reg">
    <div class="login-title">
        <div class="login-a">注册</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input type="text" class="login-text" placeholder="邮箱/手机号"></div>
        <div class="login-d"><input type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input type="button" class="login-btn" placeholder="注册"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
        </div>
    </div>
</div> -->

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/Action.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
	var vm = new Vue({
		el:"#content",
		data:{
			loginUser:'',
			articleList:[],
			articleNum:0,
			attentionNum:0,
			fansNum:0,
			collNum:0,
			attentionList:[],
			fansList:[]
		},
		created(){
			this.loadUser();
			this.loadArticle();
			this.loadFocus();
		},
		methods:{
			loadUser:function(){
				axios.defaults.withCredentials=true;
				axios.get("http://localhost:8200/user/loadUser").then(function(obj){
					if(obj.status == 200){
						var pageResult = obj.data;
						if(pageResult.code == 200){
							vm.loginUser = pageResult.result;
							return;
						}
					}
					alert("请先登录！")
				}).catch(function(obj){
					alert("请先登录!");
				})
			},
			loadArticle:function(){
				axios.defaults.withCredentials=true;
				axios.get("http://localhost:8200/article/loadArticle").then(function(obj){
					if(obj.status == 200){
						var pageResult = obj.data;
						if(pageResult.code == 200){
							var resuMap = pageResult.result;
							vm.articleList = resuMap.articleList;
							vm.articleNum = resuMap.articleNum;
						}
					}
				}).catch(function(obj){
					alert("登录之后再查看");
				})
			},
			loadFocus:function(){
				axios.defaults.withCredentials=true;
				axios.get("http://localhost:8200/user/loadFocus").then(function(obj){
					if(obj.status == 200){
						var pageResult = obj.data;
						if(pageResult.code == 200){
							var resuMap = pageResult.result;
							vm.attentionNum = resuMap.attentionNum;
							vm.fansNum = resuMap.fansNum;
							vm.collNum = resuMap.collNum;
							vm.attentionList = resuMap.attentionList;
							vm.fansList = resuMap.fansList;
						}
					}
				})
			}
		}
	})
</script>
<script>
         $(".pyl").click(function(){
					     $(this).find(".tbq").slideToggle()
					})
        </script>

</body>
</html>
